import React, { useState, useEffect } from "react";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  CardDescription,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  Users,
  Calendar,
  HardHat,
  FileText,
  Plus,
  Edit,
  Trash2,
  Brain,
  Hash,
  Milestone,
  PenSquare,
  Eye,
  UserCheck,
  MapPin,
  Zap,
} from "lucide-react";
import { format } from "date-fns";
import { useNavigate } from "react-router-dom";
import { createPageUrl } from "@/utils";
import { ConstructionSchemeAPI } from "@/api/ConstructionScheme";

export default function ProjectDetailContent({ project, onEdit, onDelete }) {
  const [schemes, setSchemes] = useState([]);
  const [isLoadingSchemes, setIsLoadingSchemes] = useState(true);
  const navigate = useNavigate();

  useEffect(() => {
    console.log(project, "projectproject");

    const fetchSchemes = async () => {
      if (!project?.id) return;
      setIsLoadingSchemes(true);
      try {
        const res = await ConstructionSchemeAPI.filter(project.id);
        console.log(res, "resres");

        const associatedSchemes = res.data;
        setSchemes(associatedSchemes);
      } catch (error) {
        console.error("加载项目关联方案失败:", error);
      } finally {
        setIsLoadingSchemes(false);
      }
    };
    fetchSchemes();
  }, [project]);

  const handleNavigateToAnalysis = (schemeId) => {
    if (schemeId) {
      navigate(createPageUrl("SchemeAnalysis") + `?id=${schemeId}`);
    } else {
      console.error("无法导航：缺少方案ID");
    }
  };

  const statusConfig = {
    notStarted: { label: "未开工", color: "bg-blue-100 text-blue-800" },
    // approved: { label: "已批准", color: "bg-indigo-100 text-indigo-800" },
    inProgress: { label: "已开工", color: "bg-yellow-100 text-yellow-800" },
    completed: { label: "已完工", color: "bg-green-100 text-green-800" },
    // suspended: { label: "已暂停", color: "bg-red-100 text-red-800" },
  };
  const currentStatus = statusConfig[project?.projectStatus] || {
    label: project?.projectStatus,
    color: "bg-gray-100 text-gray-800",
  };

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <CardTitle
              className="text-2xl font-bold text-gray-900"
              onClick={() => {
                console.log(project);
              }}
            >
              {project?.projectName || "项目详情"}
            </CardTitle>
          </div>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-8 text-sm">
            <div className="flex items-start gap-3">
              <HardHat className="w-5 h-5 text-gray-500 mt-1 flex-shrink-0" />
              <div>
                <p className="text-gray-500">项目状态</p>
                <Badge className={`${currentStatus.color} mt-1`}>
                  {currentStatus.label}
                </Badge>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <Zap className="w-5 h-5 text-gray-500 mt-1 flex-shrink-0" />
              <div>
                <p className="text-gray-500">电压等级</p>
                <p className="font-medium text-gray-800">
                  {project?.voltageLevel || "未指定"}
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <MapPin className="w-5 h-5 text-gray-500 mt-1 flex-shrink-0" />
              <div>
                <p className="text-gray-500">起点位置</p>
                <p className="font-medium text-gray-800">
                  {project?.startLocation || "未指定"}
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <MapPin className="w-5 h-5 text-gray-500 mt-1 flex-shrink-0" />
              <div>
                <p className="text-gray-500">终点位置</p>
                <p className="font-medium text-gray-800">
                  {project?.endLocation || "未指定"}
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <Milestone className="w-5 h-5 text-gray-500 mt-1 flex-shrink-0" />
              <div>
                <p className="text-gray-500">线路长度 (km)</p>
                <p className="font-medium text-gray-800">
                  {project?.totalLengthKm || "未指定"}
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <Calendar className="w-5 h-5 text-gray-500 mt-1 flex-shrink-0" />
              <div>
                <p className="text-gray-500">计划开工日期</p>
                <p className="font-medium text-gray-800">
                  {project?.plannedStartDate
                    ? format(new Date(project.plannedStartDate), "yyyy-MM-dd")
                    : "未指定"}
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <Calendar className="w-5 h-5 text-gray-500 mt-1 flex-shrink-0" />
              <div>
                <p className="text-gray-500">计划完工日期</p>
                <p className="font-medium text-gray-800">
                  {project?.plannedEndDate
                    ? format(new Date(project.plannedEndDate), "yyyy-MM-dd")
                    : "未指定"}
                </p>
              </div>
            </div>
          </div>

          <div className="mt-6 pt-6 border-t grid grid-cols-1 md:grid-cols-3 gap-6 text-sm">
            <div className="flex items-start gap-3">
              <Users className="w-5 h-5 text-gray-500 mt-1 flex-shrink-0" />
              <div>
                <p className="text-gray-500">项目经理</p>
                <p className="font-medium text-gray-800">
                  {project?.projectManager || "未指定"}
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <UserCheck className="w-5 h-5 text-gray-500 mt-1 flex-shrink-0" />
              <div>
                <p className="text-gray-500">技术负责人</p>
                <p className="font-medium text-gray-800">
                  {project?.technicalLeader || "未指定"}
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <HardHat className="w-5 h-5 text-gray-500 mt-1 flex-shrink-0" />
              <div>
                <p className="text-gray-500">施工单位</p>
                <p className="font-medium text-gray-800">
                  {project?.constructionUnit || "未指定"}
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <PenSquare className="w-5 h-5 text-gray-500 mt-1 flex-shrink-0" />
              <div>
                <p className="text-gray-500">设计单位</p>
                <p className="font-medium text-gray-800">
                  {project?.designUnit || "未指定"}
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3">
              <Eye className="w-5 h-5 text-gray-500 mt-1 flex-shrink-0" />
              <div>
                <p className="text-gray-500">监理单位</p>
                <p className="font-medium text-gray-800">
                  {project?.supervisionUnit || "未指定"}
                </p>
              </div>
            </div>
          </div>
          <div className="mt-6 pt-4 border-t">
            <h4 className="font-semibold text-gray-800 mb-2">项目概况</h4>
            <p className="text-gray-600">{project.projectDescription}</p>
          </div>
        </CardContent>
      </Card>

      {/* <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <FileText className="w-5 h-5 text-blue-600" />
            施工方案
          </CardTitle>
          <CardDescription>与此项目关联的所有施工方案。</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {isLoadingSchemes ? (
              <p>加载施工方案中...</p>
            ) : schemes.length > 0 ? (
              schemes.map((scheme) => (
                <div
                  key={scheme.id}
                  className="flex items-center justify-between p-3 bg-gray-50 rounded-lg border"
                >
                  <div>
                    <p className="font-semibold text-gray-800">{scheme.name}</p>
                    <p className="text-sm text-gray-500">
                      {scheme.construction_method}
                    </p>
                  </div>
                  <div className="flex items-center gap-2">
                    <Badge variant="outline">{scheme.approval_status}</Badge>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => handleNavigateToAnalysis(scheme.id)}
                    >
                      <Brain className="w-4 h-4 mr-2" />
                      分析方案
                    </Button>
                  </div>
                </div>
              ))
            ) : (
              <p className="text-gray-500 text-center py-4">
                此项目暂无关联的施工方案。
              </p>
            )}
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <MapPin className="w-5 h-5 text-green-600" />
            交叉跨越点管理
          </CardTitle>
          <CardDescription>管理与此项目关联的所有跨越点。</CardDescription>
        </CardHeader>
        <CardContent>
          <ProjectCrossingPointsList projectId={project.id} />
        </CardContent>
      </Card> */}
    </div>
  );
}
